<?php
include_once dirname(__FILE__).'/templates/header.php';
?>

<script type="text/javascript">
function resizeTable() {
  var val = document.getElementById("newValue").value;
  var cols = document.getElementsByName("sarake");
  var tFirstRowCells = document.getElementsByTagName("table")[0].getElementsByTagName("tr")[0].getElementsByTagName("td");
  
  var string = '';
  for(i=0;i<tFirstRowCells.length;i++) {
    string += tFirstRowCells[i].offsetWidth + " ";
  }
  
  var col = null;
  for(var i=0;i<cols.length;i++) {
    col = cols[i].checked ? cols[i].value : col;
  }
  alert("syötit arvon "+val+" ja sarakkeeksi valitsit '"+col+"'\nTaulukon leveydet nyt: "+string);
  
  for(i=0;i<tFirstRowCells.length;i++) {
    if(i==col-1) {
      tFirstRowCells[i].style.width = val + "px";
    }
  }
  
}

window.onload = function() {
  document.getElementById("changeWidth").onclick = resizeTable;
}

</script>
<table cellspacing="0" class="tableOuter" cellborders="true" style="border:1px solid" >
  <tr><td><strong>col1</strong></td><td><strong>col2</strong></td><td><strong>col3</strong></td></tr>
  <tr><td>data1</td><td>pitkädata2</td><td>tositosi  tositosierittäinpitkädata3</td></tr>
  <tr><td>tositosi  tositosierittäinpitkädata3</td><td>pitkädata2</td><td>tositosi  tositosierittäinpitkädata3</td></tr>
  
</table>
<div>
<div id="divTable" class="tableOuter">
  <div class="tableRow"><div class="tableCell">1</div><div class="tableCell">2</div><div class="tableCell">3</div></div>
  <div class="tableRow"><div class="tableCell">ekaarvo</div><div class="tableCell">tokaarvo</div><div class="tableCell">kolmas, tosipitkä arvo</div></div>
  <div class="tableRow"><div class="tableCell"></div><div class="tableCell"></div><div class="tableCell"></div></div>
  <div class="tableRow"><div class="tableCell"></div><div class="tableCell"></div><div class="tableCell"></div></div>  
</div>
</div>
  
<div>
Muutettava sarake: 
1<input type="radio" name="sarake" value="1" />
2<input type="radio" name="sarake" value="2" />
3<input type="radio" name="sarake" value="3" />
</div>
<input id="newValue" type="text" />
<button id="changeWidth">Muuta leveys</button>
<?php
include_once dirname(__FILE__).'/templates/footer.php';
?>
